<template>
  <el-card>
    <div slot="header" class="clearfix flex">
      <b class="header-title">遮雨篷控制</b>
      <el-button
        v-if="childSelected.length > 0"
        type="primary"
        size="mini"
        class="mlauto"
        icon="el-icon-s-operation"
        @click="showControlContainer"
      >控制选中</el-button>
    </div>
    <div class="childs-container">
      <dl
        v-for="(item,index) in currentDevice.devices"
        :key="index"
        class="menux"
        @click="selectItem(item)"
      >
        <dt><img :src="getDeviceImage(currentDevice)" alt=""></dt>
        <dd>{{ `遮雨篷${item.idx}` }}</dd>
      </dl>
    </div>
    <el-dialog
      v-el-drag-dialog
      title="雨篷控制"
      :append-to-body="true"
      destroy-on-close
      :visible.sync="dialogVisible"
      @close="dialogClose"
    >
      <div class="tags">
        <el-tag
          v-for="(item,index) in childSelected"
          :key="index"
          closable
          type="primary"
          style="margin:8px 8px 8px 0;"
          @close="closeTag(index)"
        >
          {{ item.name }}
        </el-tag>
      </div>
      <div class="h20" />
      <div class="btn-container">
        <el-button type="primary" size="small" icon="el-icon-caret-right" @click="control(1)">打开</el-button>
        <el-button type="danger" size="small" icon="el-icon-switch-button" @click="control(0)">关闭</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { dclassMap } from '@/utils/constant'
import { selectable } from '@/utils/selectable'
import { uniqueArr } from '@/utils'
import { getDeviceStatus, getDeviceImage } from '@/utils/device'
import elDragDialog from '@/directive/el-drag-dialog'
import { sendCommand } from '@/api/device'
export default {
  directives: { elDragDialog },
  data() {
    return {
      dclassMap,
      childSelected: [],
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['currentDevice'])
  },
  watch: {
    currentDevice: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          selectable('childs-container', 'menux', (list, dom) => {
            this.childSelected = []
            list.forEach((item, index) => {
              this.childSelected.push(newVal.devices[item])
            })
            this.childSelected = uniqueArr(this.childSelected)
          })
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getDeviceStatus(item) {
      return getDeviceStatus(item)
    },
    getDeviceImage(item) {
      return getDeviceImage(item)
    },
    selectItem(item) {
      this.childSelected = [item]
      this.dialogVisible = true
    },
    showControlContainer() {
      this.dialogVisible = true
    },
    control(value) {
      const namekeys = ['Close_', 'Open_']
      const namekey = namekeys[value]
      this.childSelected.forEach((item, index) => {
        const action = {
          namekey: `${namekey}${item.idx}`,
          value: 1
        }
        this.sendCommand(action, item.device_serialno)
      })
    },
    closeTag(index) {
      this.childSelected.splice(index, 1)
    },
    dialogClose() {
      this.childSelected = []
    },
    sendCommand(data, serialno) {
      this.$confirm('确定要执行此操作吗？', '操作提醒', { type: 'warning' }).then(() => {
        sendCommand(data, serialno).then(res => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
        }).catch(err => {
          console.log(err)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
